---
title: Tailwind CSS Radio - Components Library @David UI
description: Add single-choice options with Tailwind CSS radio components. Fully responsive and customizable for intuitive, accessible forms and interfaces.
github: radio
prev: docs/react/input
next: docs/react/rating
---

# Tailwind CSS Radio Button

The radio component from David UI enables stylish and accessible single-choice options for forms. Built with Tailwind CSS, it’s fully customizable and responsive.

The radio is usually a circular button with a label, where only one button in a group can be selected at a time.

Check David UI's Tailwind CSS radio examples to integrate this component effortlessly.

---

## Radio Button Demo

This example includes two radio buttons that let the users choose between the two options in a straightforward interface.

<PreviewWithCode relativePath="radio/radio-demo.tsx" language="html" />

---

## Radio Button Colors

A collection of uniquely styled radio buttons is displayed here, offering a variety of color options, including primary, secondary, info, success, warning, and error, for personalized selection.

<PreviewWithCode relativePath="radio/radio-colors.tsx" language="html" />

---

## Radio Button with Custom Icon

Explore this example of radio buttons featuring custom icons, adding a visually distinct touch to the traditional selection interface.

<PreviewWithCode relativePath="radio/radio-with-custom-icon.tsx" language="html" />

---

## Disabled Radio Button

Radio buttons in this example are intentionally disabled using the `disabled` attribute, preventing interaction. This ensures proper form functionality in scenarios where selection is restricted.

<PreviewWithCode relativePath="radio/disabled-radio.tsx" language="html" />

---

## Radio Button with Link

This code example showcases radio buttons paired with labels that include clickable links, combining functionality with informative labeling.

<PreviewWithCode relativePath="radio/radio-with-link.tsx" language="html" />

---

## Radio Button With Description

This example illustrates radio buttons paired with detailed descriptions, providing a more informative and context-rich selection experience.

<PreviewWithCode relativePath="radio/radio-with-description.tsx" language="html" />

---

## Radio Button Custom Styles

Discover how to apply custom styles to radio buttons, transforming their appearance to better align with your application's design language.

<PreviewWithCode relativePath="radio/custom-radio.tsx" language="html" />
